<template>
  <div>
    <!-- <h3 class="thin" :class="isItalic ? 'italic' : ''">MyStyle 组件</h3> -->
    <h3 class="thin" :class="classObj">MyStyle 组件</h3>
    <button @click="classObj.italic=!classObj.italic" >Toggle Italic</button>
    <button @click="classObj.delete=!classObj.delete" >Toggle Delete</button>
  </div>
</template>

<script>
export default {
  name: 'MyStyle2',
  data() {
    return {
       classObj:{
          italic:true,
          delete:false
       }
    }
  }
}
</script>

<style lang="less" scoped >
// 字体变细
.thin {
  font-weight: 200;
}

// 倾斜字体
.italic {
  font-style: italic;
}

.delete{
    text-decoration:line-through;
}
</style>